<script setup>
import {onMounted, ref} from "vue";
import {deleteOrder, getOrderList, shipmentsOrder} from "@/api/order.js";
import CardArea from "@/components/cardArea.vue";
import MyTable from "@/common/myTable.vue";
import {ElMessage, ElMessageBox} from "element-plus";


const pageData = ref({
  list: [],
  total: undefined,
})
//搜索条件
const searchData = ref({
  page: 1,
  size: 10,
})

onMounted(async () => {
  await getList()
})

const getList = async () => {
  const {data} = await getOrderList(searchData.value)
  pageData.value = data
}

const getOrderStatusText = (status) => {
  switch (status) {
    case 'pending':
      return '待付款'
    case 'processing':
      return '待发货'
    case 'cancelled':
      return '已取消'
    case 'shipped':
      return '待收货'
    case 'completed':
      return '已完成'
    default:
      return '未知状态'
  }
}

// 发货
const shipments = (id) => {
  // 输入物流单号
  ElMessageBox.prompt("请输入物流单号", {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPlaceholder: '请输入物流单号',
  })
      .then(async ({value}) => {
        try {
          const {msg, code} = await shipmentsOrder(id, value)
          if (code !== 200) throw new Error(msg || '发货失败')
          ElMessage.success('发货成功')
          await getList()
        } catch (e) {
          ElMessage.error(e.message)
        }
      })
}

const columns = [
  {key: 'selection', type: 'selection', width: '55px'},
  {key: 'id', title: 'id'},
  {key: 'orderNo', title: '订单号'},
  {key: 'status', title: '状态', slot: 'status'},
  {key: 'item', title: '订单详情', slot: 'item'},
  {key: 'createdTime', title: '创建时间', width: '220px'},
  {key: 'updatedTime', title: '修改时间', width: '220px'},
  {key: 'action', title: '操作', width: 100},
]
const actionFlag = ref(false)

const details = ref([])
</script>

<template>
  <el-dialog width="700" v-model="actionFlag">
    <div v-if="details.length">
      <el-table :data="details">
        <template #default="{row}">
          <el-table-column label="商品图片" prop="productId">
            <template #default="{row}">
              <img :src="row.productImage" alt="" style="width: 50px; height: 50px"></img>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="productName"></el-table-column>
          <el-table-column label="商品数量" prop="quantity"></el-table-column>
          <el-table-column label="商品价格" prop="price"></el-table-column>
        </template>
      </el-table>
    </div>
  </el-dialog>

  <card-area title="订单管理">
    <my-table v-model:search-data="searchData" :columns="columns" :list="pageData.list" :total="pageData.total"
              @load="getList">

      <template #status="{row}">
        <el-tag type="danger" v-if="row.status === 'pending'">{{ getOrderStatusText(row.status) }}</el-tag>
        <el-tag type="warning" v-else-if="row.status === 'processing'">{{ getOrderStatusText(row.status) }}</el-tag>
        <el-tag type="primary" v-else-if="row.status === 'shipped'">{{ getOrderStatusText(row.status) }}</el-tag>
        <el-tag type="success" v-else-if="row.status === 'completed'">{{ getOrderStatusText(row.status) }}</el-tag>
        <el-tag type="info" v-else-if="row.status === 'cancelled'">{{ getOrderStatusText(row.status) }}</el-tag>
        <el-tag v-else>未知状态</el-tag>
      </template>

      <template #item="{row}">
        <el-link v-if="row.orderItems" @click="() => {actionFlag = true; details = row.orderItems}">
          {{
            Array.isArray(row.orderItems?.map((item => item.productName))) ? row.orderItems?.map((item => item.productName)).join('、') : ''
          }}
        </el-link>
      </template>

      <template #action="{row}">
        <el-button type="success" v-if="row.status === 'processing'" plain @click="shipments(row.id)">发货</el-button>
      </template>
    </my-table>
  </card-area>
</template>

<style scoped lang="scss">

</style>
